<template>
  <div>
    <template v-if="lang">
      <el-tabs v-if="showTab" v-model="selectedLangId" type="card" @tab-click="handleChangeTab">
        <el-tab-pane v-for="l in langList" :key="l.id" :label="l.name" :name="l.id">
          <slot :lang="l"/>
        </el-tab-pane>
      </el-tabs>
      <div v-else>
        <div v-for="l in langList" v-show="l.id === selectedLangId" :key="l.id">
          <slot :lang="l"/>
        </div>
      </div>
    </template>
    <slot v-else/>
  </div>
</template>

<script>
import LangTypeEnum from '@/framework/constant/LangTypeEnum'

export default {
  name: 'LangWrapper',
  data() {
    return {
      selectedLangId: this.activeLangId,
      langList: LangTypeEnum.getValues()
    }
  },
  methods: {
    handleChangeTab({ name }) {
      this.$emit('change', { id: name, lang: LangTypeEnum.getById(name) })
    }
  },
  props: {
    lang: {
      type: [Boolean, Object],
      default: false
    },
    activeLangId: {
      type: String,
      default: LangTypeEnum.CNT.id
    },
    showTab: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style scoped>

</style>
